<template>

  <div class="my">
    <Back></Back>

    <div class=" dd-column dd-row dd-center" >
      <div class="userAvatorDiv ">
        <img class="userAvatorImg" :src=" userInfo.avator ? userInfo.avator : userAvator" alt="">
      </div>
      <div class="phone dd-row dd-center">{{userInfo.name}}</div>
    </div>

    <div class="body dd-mgt20">

      <ul>
        <li v-for="(item,index) in dataArray" v-bind:key="index">
          <ItemLink :item="item"></ItemLink>
        </li>
      </ul>

    </div>
    <!-- 根据登陆状态显示不同文字 -->
    <div class="loginBtn dd-row dd-center dd-fixed-bottom">
      <!-- <div class="btn btn-danger ">切换账号 / 登陆</div> -->
      <div class="btns">
        <div class="dd-btn-red-c" @click="login(loginBool)">{{loginBool ? "切换账号" : "请登录"}}</div>
        <div class="dd-btn-default dd-mgt10">退出</div>
      </div>

    </div>
  </div>
</template>
<script>
import Back from "@/components/Back.vue";
import ItemLink from "@/components/My/ItemLink";

import userAvator from "@/assets/img/my.png";

export default {
  name: "My",
  commit: {
    Back,
    ItemLink
  },
  components: {
    Back,
    ItemLink
  },
  data() {
    return {

      loginBool:false,  /**/

      userInfo: {
        avator: userAvator,
        name: "请登录"
      },

      dataArray: [
        {
          icon: "myOrder",
          title: "我的订单",
          intro: "",
          introColor: "#ccc",
          link: "myOrder"
        },
        {
          icon: "yhCard",
          title: "我的优惠券",
          intro: "0 张",
          introColor: "#ccc",
          link: "foods"
        },
        {
          icon: "jifen",
          title: "积分商城",
          link: "foods"
        },
        {
          icon: "tuijian",
          title: "推荐有奖",
          intro: "每人免费送一碗面",
          introColor: "#ff0000",
          link: "foods"
        },
        {
          icon: "kefu",
          title: "联系客服",
          link: "customerService"
        }
      ]
    };
  },
  mounted() {
    // 判断登陆

    // 登陆后的获取用户的信息
    // let _userInfo = {
    //   avator:
    //     "https://img3.duitang.com/uploads/item/201508/07/20150807082213_AcdWu.jpeg",
    //   name: "spanman"
    // };
    // this.userInfo = _userInfo;
  },
  methods:{
    login(_bool){
      // true 为 已经登录 此时应该是 去 切换账号
      // false 为 没登录 此时应该是 去 登录
      console.log("_bool--->",_bool);

      this.$router.push('/login')
    }
  }
};
</script>
<style scoped>
html {
  background: #f1f1f1;
}

/* userAvatorDiv 用户 */
.userAvatorDiv {
  margin: 10pt 0;
  width: 50pt;
  height: 50pt;
  background: #f1f1f1;
  border-radius: 50%;
  box-sizing: 0 0 5pt #ccc;
}
.userAvatorDiv .userAvatorImg {
  width: 50pt;
  height: 50pt;
  border-radius: 50%;
  background: #f1f1f1;
}

.head > .pic > img {
  width: 200px;
  height: 200px;
}
.head > .phone {
  background: pink;
  /* text-align: center; */
}

/* 中间的部分 */
.body{
  background: #aaa;
}


/* loginBtn */
.loginBtn {
  bottom: 10pt;
}
</style>
